<script>
export default {
  name: 'BaseSwith',
  props: {
    tabs: {
      type: Array,
      default: () => ['属性','幻化'],
    },
    value: {
      type: [String, Number],
      default: 0,
    },
  },
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
    selectTab(id) {
      if (this.value != id) {
        this.$emit('update:value', id)
        this.$emit('change', id)
      }
    },
  },
}
</script>

<template>
  <view class="form-switch">
    <view v-for="(tab, i) in tabs" :key="i"  class="switch-tab" :class="{ active: i == value }" @click="selectTab(i)">
      {{ tab }}
    </view>
  </view>
</template>

<style scoped lang="scss">
.form-switch {
  height: 55rpx;
  width: 350rpx;
  display:flex;
  align-items: center;
  justify-content: center;
  border-radius:35rpx; 
  background-color: rgba(0,0,0,0.5);
  padding: 5rpx;
  font-weight: bold;

  .switch-tab{
    height: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color:#a8926b;
    &.active {
      border-radius:35rpx; 
      background: linear-gradient(to bottom, #f4d849, #ffe86e);
      color:#2d0a00
    }
  }
}
</style>
